<template>
  <div id="app">
<table class="table">
    <tr v-for="(item,index) in properties">
        <td><strong>{{item.specName}}：{{index}}</strong></td>
        <td>

            <label v-for="value in item.goodsSpecValuePOs"><input type="checkbox" :value="value" v-model="item.selectedValues"/>{{value.specValue}}</label>

            <table class="list_table" v-if="item.specName!='发货地'&&item.selectedValues.length>0">
                <tbody>
                <tr>
                    <th>{{item.specName}}</th>
                    <th>自定义名称</th>
                    <th v-if="item.specName=='颜色'">图片（无图片可以不填）</th>
                </tr>

                <tr v-for="selectedValue in item.selectedValues">
                    <td>{{selectedValue.specValue}}</td>
                    <td>
                        <input type="text" v-model="selectedValue.DefinitionName" maxlength="20"/>
                    </td>
                    <td v-if="item.specName=='颜色'">
                        <div style="float: left">
                            <input type="file"  style="width: 63px;"/>
                        </div>
                        <div style="float: right">
                            <a href="" rel="link" target="_blank">
                                <img :src="selectedValue.ImageUrl" width="30" height="35"/>
                            </a>
                        </div>
                    </td>
                </tr>

                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td align="right"></td>
        <td>
            <p class="c_a4">下表的零售价是最终展示给买家的产品价格。</p>
            <table id="skuPrice_table" class="product_list_table break-word mt_0">
                <tbody>
                  <tr>
                      <td colspan="4">
                          批量设置零售价: $ 
                          
                          <Input v-model="tongPrice" :maxlength=9 placeholder="零售价" style="width: 150px"></Input>
                          <Button @click="batchSetPrice" style="margin-right:30px;">确认</Button>

                            批量设置库存：
                          <Input v-model="tongStock" :maxlength=9 placeholder="库存" style="width: 150px"></Input>
                          <Button @click="batchSetStockQuantity">确认</Button>
                          
                      </td>
                  </tr>
                  <tr>
                      <th v-for="item in properties" v-if="item.selectedValues.length>0">{{item.specName}}</th>
                      <th><span class="c_red">*</span>零售价</th>
                      <th><span class="c_red">*</span>库存</th>
                      <th>商品编码</th>
                  </tr>
                  <tr v-for="sku in skus">
                      <td v-for="item in properties" v-if="item.selectedValues.length>0">{{getValueName(sku,item)}}</td>
                      <td>
                          ￥
                          <input type="text" v-model="sku.SkuPrice" class="w50" maxlength="9"/>
                          <span name="productUnitTips"></span>
                      </td>
                      <td>
                          <input type="text" v-model="sku.StockQuantity" class="w50" maxlength="9"/>
                      </td>
                      <td>
                          <input type="text" v-model="sku.SkuCode" class="w180" maxlength="20"/>
                      </td>
                  </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>
表格数据
<div>{{skusResult}}</div>
选中规格
<div>{{propertyResult}}</div>

<!-- <div @click='btn'>点击查看</div> -->
</div>
</template>

<script>
export default {
  props:['data'],
  data() {
    return {
      tongPrice:'',//统一零售价
      tongStock:"",//同意库存
      properties: [
        {
          id: 1,
          specName: "颜色222",
          goodsSpecValuePOs: [
            {
              specId: 1,
              id: 1,
              specValue: "红",
              DefinitionName: "",
              ImageUrl: ""
            },
            {
              specId: 1,
              id: 2,
              specValue: "黄",
              DefinitionName: "",
              ImageUrl: ""
            },
            {
              specId: 1,
              id: 3,
              specValue: "绿",
              DefinitionName: "",
              ImageUrl: ""
            }
          ],
          selectedValues: []
        },
        {
          id: 3,
          specName: "颜色",
          goodsSpecValuePOs: [
            {
              specId: 3,
              id: 25,
              specValue: "1",
              DefinitionName: "",
              ImageUrl: ""
            },
            {
              specId: 3,
              id: 26,
              specValue: "2",
              DefinitionName: "",
              ImageUrl: ""
            },
            {
              specId: 3,
              id: 27,
              specValue: "3",
              DefinitionName: "",
              ImageUrl: ""
            }
          ],
          selectedValues: []
        },
      ],
    //   properties:[],
      skus: [
        // {
        //   SkuCode: "", //商品编码
        //   SkuPrice: "0.00", //零售价
        //   StockQuantity: 0, //库存
        //   values: [
        //     { propertyId: 4, valueId: 35 },
        //     { propertyId: 5, valueId: 13 }
        //   ]
        // },
        // {
        //   SkuCode: "",
        //   SkuPrice: "0.00",
        //   StockQuantity: 0,
        //   values: [
        //     {
        //       propertyId: 4,
        //       valueId: 34
        //     },
        //     {
        //       propertyId: 5,
        //       valueId: 13
        //     }
        //   ]
        // }
      ]
    };
  },
  computed: {
    allCheckedLength(){
      var length = 0;
      this.properties.forEach((item)=>{
        length +=item.selectedValues.length
      })
      console.log(length);
      return length

    },
    skusResult: function() {
      return JSON.stringify(this.skus);
    },
    propertyResult(){ //选中的规格
      var result = [];
      this.properties.forEach((item)=>{
        item.selectedValues.forEach((child)=>{
          result.push(child)
        })
      });
      return JSON.stringify(result);
    }
  },
  watch: {
    allCheckedLength: {
      handler: "reBuild"
    }
  },
  methods: {

    batchSetPrice(){ //批发零售价

      this.skus.forEach((item)=>{
        item.SkuPrice = this.tongPrice
        console.log(item)

      })
    },
    batchSetStockQuantity(){ //统一库存
      this.skus.forEach((item)=>{
        item.StockQuantity = this.tongStock
        console.log(item)

      })
    },
    reBuild(val,oldVal){
      var vmSkus = (this.skus = []);
      var propertyChecked = [];
      var skuCount = 1;
      var ori = [];

      this.properties.forEach((item,index)=>{
        if(item.selectedValues.length>0){
          propertyChecked.push(index);
          skuCount *= item.selectedValues.length;
          ori.push(item.selectedValues);
        }
      })

      var ret = this.descartes(ori);
      for (var i = 0; i < ret.length; i++) {
        var sku = { SkuCode: "", SkuPrice: "", StockQuantity: "" };
        sku.values = [];
        ret[i].forEach((item)=>{
          sku.values.push({specId:item.specId,valueId:item.id})
        })
        vmSkus.push(sku);
      }

    },

    getValueName(sku, property){
      console.log(sku);
      console.log(property);
      var valueName = "";
      sku.values.forEach((item)=>{
        if(item.specId == property.id){
          property.selectedValues.forEach((child)=>{
            if(item.valueId == child.id){
              valueName = child.specValue;
            }
          })
        }
      })
      return valueName;
    },

    descartes(list) {
      //parent上一级索引;count指针计数
      var point = {};
      var result = [];
      var pIndex = null;
      var tempCount = 0;
      var temp = [];
      //根据参数列生成指针对象
      for (var index in list) {
        if (typeof list[index] == "object") {
          point[index] = { parent: pIndex, count: 0 };
          pIndex = index;
        }
      }
      //单维度数据结构直接返回
      if (pIndex == null) {
        return list;
      }
      //动态生成笛卡尔积
      while (true) {
        for (var index in list) {
          tempCount = point[index]["count"];
          temp.push(list[index][tempCount]);
        }
        //压入结果数组
        result.push(temp);
        temp = [];
        //检查指针最大值问题
        while (true) {
          if (point[index]["count"] + 1 >= list[index].length) {
            point[index]["count"] = 0;
            pIndex = point[index]["parent"];
            if (pIndex == null) {
              return result;
            }
            //赋值parent进行再次检查
            index = pIndex;
          } else {
            point[index]["count"]++;
            break;
          }
        }
      }
    }
  },
  mounted(){
    // this.data.forEach((item)=>{
    //   item.selectedValues = []
    // })
    // this.properties = this.data;
    console.log(this.properties);
  }
};
</script>
<style scoped>

  table {
    border-collapse: collapse;
  }

  table th {
    background-color: antiquewhite;
  }

  table td,
  th {
    border: solid 1px #b4aba1;
  }

  .table label {
    margin-left: 30px;
    float: left;
    width: 150px;
  }

  .table label input {
    margin-top: 4px;
  }

  .table td {
    min-width: 100px;
  }

  .list_table {
    clear: both;
    margin-left: 30px;
    margin-top: 10px;
  }
</style>
